@background-color: #343a40;
@link: #aeb0b2;
@link-hover: #ffffff;
@link-hover-reverse: #000000;
@link-in-dark-color: #bdbdbd;
@dark-background-text-color: #ffffff;
@dark-background-text-color-reverse: #000000;
@dark-background-text-secondary-color: #cecece;
@dark-background-secondary: #545454;
@light-background-color: #ffffff;
@card-footer-color: #333333;
@navbar-color: #303F9F;
@navbar-text-color: #e8e8e8;
@search-placeholder-color: #dcdcdc;
@tag-color: #343a40;
@tag-star-color: #f1c40f;
@tab-link-color: #fffffc;
@white-card-link-hover: #000000;
@white-card-link: rgba(0, 0, 0, .54);
@dropdown-item-link: #212529;
@main-background-color: #4e4e4e;

body.wz-dark-theme {
  background: @background-color;
}

.wz-dark-theme {
  .wz-main-container {
    background: @background-color;
  }

  .markdown-body {
    table {
      background: #4e4e4e;
    }
  }

  .wz-panel-right {
    background: @main-background-color;
  }

  a {
    &.dropdown-item {
      color: @dropdown-item-link;
      &:hover {
        color: @link-hover;
        background: @background-color;
      }
    }
  }

  .footer {
    background: #333;
    color: @dark-background-text-color;
    border-top: none;

    a {
      color: @link;
    }

    a:hover {
      color: @link-hover;
    }
  }

  .wz-left-main {

    .material-icons,
    .wz-left-nav a,
    .wz-project-title > a {
      color: @link;
    }

    .wz-left-nav {
      a:hover,
      li.active > a,
      li.active > a:hover {
        color: @link-hover;
      }
    }

    .wz-project-title > a:hover,
    button:hover .material-icons {
      color: @link-hover;
    }

    .nav {
      .nav-link {
        color: @link-in-dark-color;

        &:hover,
        &.active {
          color: @link-hover;
        }
      }
    }
  }

  .wz-box-new {
    border: none;
  }

  .wz-box-tag-star {
    color: @tag-star-color !important;
  }

  a#scrollUp {
    color: @link;

    &:hover {
      color: #00aaaa;
    }
  }

  .wz-top-navbar {
    background: @navbar-color !important;
    border-bottom: none !important;

    a.text-dark,
    h5 a {
      color: @navbar-text-color !important;
    }

    a.text-dark:hover {
      color: @link-hover !important;
    }

    .wz-top-nav-search input::-webkit-input-placeholder {
      color: @search-placeholder-color;
    }
  }

  .wz-panel-separator {
    &:hover {
      box-shadow: 8px 3px 5px 0 rgb(177, 177, 177);
      background: @background-color;
    }
  }


  .wz-panel-breadcrumb {
    background: @background-color;

    .breadcrumb a,
    .nav > li > button > .fa,
    .nav > li > button > .material-icons {
      color: @link-in-dark-color;
    }
  }

  .swagger-editor-toolbar a {
    color: @link-in-dark-color;
  }

  .breadcrumb-item.active,
  .wz-panel-breadcrumb a:hover,
  .wz-panel-breadcrumb .nav button:hover .fa,
  .wz-theme-indicator .material-icons,
  .swagger-editor-toolbar a:hover {
    color: @link-hover;
  }

  .wz-setting-breadcrumb .breadcrumb-item {
    color: #555555;
  }

  .wz-setting-breadcrumb .breadcrumb-item.active {
    color: #b1b1b1;
  }

  .card:not(.card-white) {
    background: #d8d8d8;

    .card-header {
      a {
        color: @link;
        &:hover {
          color: @link-hover-reverse;
        }
      }

      .badge {
        color: #e4e4e4;
        &:hover {
          color: #ffffff;
        }
      }
    }

    .wz-box-catalog {
      background-color: #4a4a4a;
      border: none;
    }

    .wz-box-catalog:hover {
      background-color: #000000;
    }

    .wz-box-catalog .wz-title {
      color: #fff;
    }

    .wz-box-project {
      background-color: #4a4a4a;
    }

    .wz-box-project:hover {
      background-color: #000000;
    }

    .wz-box-project .wz-title,
    .wz-box-project .wz-page-count {
      color: @dark-background-text-color;
    }

    .wz-main-container-full .alert-info {
      color: #4a4a4a;
      background-color: #cecece;

      a {
        color: #2d3a9a;
        &:hover {
          color: #3F51D7;
        }
      }
    }

    .tm-tag {
      background: @tag-color;
      a {
        color: @link-in-dark-color;
        &:hover {
          color: @link-hover;
        }
      }
    }

    .media {
      .media-body {
        .wz-text-dashed {
          color: #484848;
        }

        a {
          color: #585858;
        }

        a:hover {
          color: #000000;
        }
      }

      .border-bottom {
        border-bottom: 1px solid #848484 !important;
      }
    }

    .card-footer {
      background-color: @card-footer-color;
      a {
        color: @link-in-dark-color;
      }
    }
  }

  .wz-box-catalog {
    box-shadow: 8px 7px 2px #878787b3;
  }

  .wz-comment-panel {
    background: transparent;
  }

  .card.card-white,
  .wz-diff-control,
  .wz-diff-result {
    background: @light-background-color;
  }

  .wz-white-panel {
    .card {
      background: @light-background-color;
    }

    .card a {
      color: @white-card-link;
    }

    .card a:hover {
      color: @white-card-link-hover;
    }
  }

  .nav-tabs .nav-item a {
    color: @tab-link-color;
  }

  .wz-project-main {
    background: @main-background-color;

    img, svg {
      background: #ffffff;
    }

    .wz-project-description {
      color: @dark-background-text-color;
    }

    &>h1, .wz-group-allowed-list, .table thead th {
      color: @dark-background-text-color;
    }

    .wz-page-title {
      color: @dark-background-text-color;
    }

    .wz-document-header {
      color: @dark-background-text-secondary-color;
    }

    .wz-tags {
      input {
        background: @dark-background-secondary;
      }
    }

    .wz-content-end {
      color: @dark-background-text-secondary-color;
    }

    .wz-attachments {
      h4, li {
        color: @dark-background-text-color;
      }
    }

    .wz-comment-panel {
      background: none;

      .wz-text-dashed {
        color: @dark-background-text-color!important;
      }

      .wz-comment-box {
        border: 1px solid #1f1f1f;
        .wz-comment-header {
          background: #3a3a3a;
          border-bottom: 1px solid #1f1f1f;
          color: #CCCCCC;
        }
      }

      .wz-comment-editor {
        border: 1px solid #1f1f1f;
        .wz-comment-editor-header {
          background: #3a3a3a;
          border-bottom: 1px solid #1f1f1f;

          button {
            color: #CCCCCC;
          }

          .wz-comment-editor-write {
            background: #4e4e4e;
            border: 1px solid #1f1f1f;
            border-bottom: 1px solid #4e4e4e;
          }

          .wz-comment-editor-readonly {
            background-color: transparent;
            border: none;
          }
        }

        .wz-comment-editor-tip {
          color: #fbfbfb;
        }

        .wz-comment-editor-body {
          textarea {
            background: #424242;
            color: #ffffff;
            &:focus {
              background: #000000;

            }
          }
        }
      }
    }

    .wz-document-swagger-sync-info {
      background: @main-background-color;
      color: @dark-background-text-color;
      a {
        color: #75d4ff;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }

    .editormd-html-preview {
      background: @main-background-color;
      color: @dark-background-text-color;

      blockquote {
        color: @dark-background-text-secondary-color;
      }
      code {
        background: #f6f6f614;
        color: #ff0057;
      }
      a {
        color: #75d4ff;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }

      .prettyprint {
        border: 1px dashed #000!important;
        background: #636363!important;

        li {
          background: #4e4e4ead;
        }

        li.L1, li.L3, li.L5, li.L7, li.L9 {
          background: #4e4e4e!important;
        }
        code {
          background: none;
          .pln {
            color: #CCCCCC;
          }
          .str {
            color: #72ff72;
          }
          .com {
            color: #949494;
          }
          .lit {
            color: #08f1f1;
          }
          .kwd {
            color: #000073;
          }
          .typ {
            color: #f03;
          }
          .pun, .opn, .clo {
            color: #ff0;
          }
        }
      }

      table {
        td {
          color: @dark-background-text-color;
        }
        tr {
          background: transparent;
          &:hover {
            background: #6f6f6f;
          }
        }
      }

      .card-white {
        background: none;
      }
    }
  }

  .swagger-ui  {
    background: #4e4e4e;

    img, svg {
      background: none;
    }

    .info {
      li, table, p {
        color: @dark-background-text-color;
      }
    }

    .model, label {
      color: @dark-background-text-color;
    }
    .opblock-tag {
      color: @dark-background-text-color;
      background: #616161;
      small {
        color: @dark-background-text-secondary-color;
      }
    }

    .opblock-description-wrapper p,
    .opblock-external-docs-wrapper p,
    .opblock-title_normal p {
      color: @dark-background-text-secondary-color;
    }

    .parameter__name {
      color: @dark-background-text-color;
    }

    .parameter__name.required:after {
      color: red;
    }

    .parameter__extension,
    .parameter__in {
      color: @dark-background-text-secondary-color;
    }

    section.models {
      border: 1px solid #8484846b;
      h4 {
        color: @dark-background-text-color;
        border-bottom: 1px solid #8484846b;
      }

      .model-title {
        color: @dark-background-text-secondary-color;
      }
    }

    .parameter__type {
      color: @dark-background-text-color;
    }

    .prop-format {
      color: @dark-background-text-secondary-color;
    }

    .schemes-title {
      margin: 10px 0;
    }

    .model-box, .scheme-container {
      background: rgba(255, 255, 255, 0.4);
    }

    .tablinks {
      color: #03a9f4;
    }

    table {
      thead, tbody {
        td {
          color: @dark-background-text-secondary-color;
        }
        th {
          color: @dark-background-text-color;
        }
      }
    }

    .opblock {
      .opblock-summary-description {
        color: @dark-background-text-color;
      }
      .opblock-summary-operation-id,
      .opblock-summary-path,
      .opblock-summary-path__deprecated {
        color: @dark-background-text-secondary-color;
      }
    }
  }
}